@import 'themes';

@mixin suggestions($theme) {
  .repl-prompt-suggestion-wrapper {
    position: absolute;
    background-color: if($theme == $dark-theme, $dark-app-suggestion-background-color, $lt-app-suggestion-background-color);
    z-index: 100;
    .repl-prompt-suggestion-list {
      font-size: 0.9em;
      [data-selected='true'] {
        background-color: lighten(if($theme == $dark-theme, $dark-app-background-color, $lt-app-background-color), 10%);
      }
      margin: 0;
      // dont change this
      max-height: 200px;

      // dont change this
      max-width: 300px;
      overflow: auto;
      border: 2px solid if($theme == $dark-theme, $dark-app-suggestion-border-color, $lt-app-suggestion-border-color);
      border-radius: 5px;
      padding: 2px 0;

      .repl-prompt-suggestion {
        min-height: calc(#{$app-font-size} + 8px);
        max-height: calc(#{$app-font-size} + 8px);
        display: flex;
        padding: 4px 2px;
        border-bottom: 1px solid if($theme == $dark-theme, $dark-app-suggestion-entry-border-color, $lt-app-suggestion-entry-border-color);
        cursor: pointer;

        .repl-prompt-suggestion-type {
          padding: 2px;
          font-weight: 900;
          border-radius: 100%;
          width: $app-font-size;
          height: $app-font-size;
          min-height: calc(#{$app-font-size} + 8px);
          max-height: calc(#{$app-font-size} + 8px);
          text-align: center;
          display: inline-block;
          color: if($theme == $dark-theme, $dark-app-suggestion-type-color, $lt-app-suggestion-type-color);
          font-family: if($theme == $dark-theme, $dark-app-suggestion-type-font-family, $lt-app-suggestion-type-font-family);
          background-color: if($theme == $dark-theme, $dark-app-suggestion-type-background-color, $lt-app-suggestion-type-background-color);
        }

        .repl-prompt-suggestion-text {
          width: 100%;
          height: 100%;
          padding: 2px 8px;
          display: inline-block;
          text-overflow: ellipsis;
          overflow: hidden;
          flex: 1;

          .repl-prompt-suggestion-highlight {
            white-space: nowrap;
            color: if($theme == $dark-theme, $dark-app-suggestion-type-hightlight-color, $lt-app-suggestion-type-hightlight-color);
          }

          .repl-prompt-suggestion-expect {
            white-space: nowrap;
            color: if($theme == $dark-theme, $dark-app-suggestion-type-expect-color, $lt-app-suggestion-type-expect-color);
          }
        }

        &:last-child {
          border-bottom: none;
        }
      }
    }
  }
}
